<template>
  <div class="dataCollectionHeader flex align-center justify-between">
    <div class="flex align-center">
      <div class="logo flex align-center">
        <i class="sjcj sjcj-yuanshujucaiji"></i>
        <h1>数据采集</h1>
      </div>
      <ul class="navUl flex align-center">
        <li @click="$router.push('/dataCollection/list')">数据列表</li>
        <li @click="$router.push('/dataCollection/statistics')">数据统计</li>
      </ul>
    </div>
    <div class="otherInfo flex align-center justify-end">
      <div class="timeBox">
        <h3>{{clock}}</h3>
        <p>{{date}}</p>
      </div>
      <div class="infoBox flex align-center">
        <img src="@/assets/images/profile.jpg" alt="头像" />
        <span>数据采集员</span>
        <el-icon><ArrowDown /></el-icon>
      </div>
    </div>
  </div>
</template>
<script setup name="DataCollectionHeader">
import { ref } from 'vue';

// getCurrentTime
let clock = ref('');
let timer = null;
function updateClock() {
  const now = new Date();
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');
  clock.value = `${hours}:${minutes}:${seconds}`;
}
timer = setInterval(updateClock, 1000);
updateClock();

//getCurrentDate
let date = ref('');
function getCurrentDate() {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，因此加 1
  const day = String(now.getDate()).padStart(2, '0'); // 获取当前日期并格式化
  date.value = `${year}/${month}/${day}`;
}
getCurrentDate();

onUnmounted(() => {
  clearInterval(timer);
});
</script>
<style lang="scss" scoped>
.dataCollectionHeader{
  height: 70px;
  border-bottom: 1px solid #f1f1f1;
  padding: 0 20px;
  box-shadow: 0 0 5px #f1f1f1;
  .logo{
    i{
      font-size: 30px;
      color: #1c84c6;
      margin-right: 10px;
    }
    h1{
      font-size: 24px;
      color: #333;
      font-weight: 600;
    }
  }
  .navUl{
    margin:0 0 0 60px;
    li{
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
      list-style: none;
      position: relative;
      margin-right: 60px;
      &:hover{
        color: #1c84c6;
      }
      &::before{
        content: '';
        display: block;
        width: 10px;
        height:10px;
        border-bottom: 4px solid #333;
        border-right: 4px solid #333;
        transform: rotate(-45deg);
        position: absolute;
        left: -20px;
        top: 50%;
        margin-top: -5px;
      }
    }
  }
  .otherInfo{
    .timeBox{
      text-align: right;
      h3{
        font-size: 26px;
        color: #333;
        font-family: "numberFont";
        margin: 0;
        font-weight: bold;
      }
      p{
        font-size: 18px;
        color: #333;
        font-family: "numberFont";
        margin: 0;
        font-weight: bold;
      }
    }
    .infoBox{
      margin-left: 20px;
      img{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 10px;
      }
      span{
        font-size: 16px;
        margin-right: 5px;
      }
    }

  }
}
</style>